<template>
  <div class="container-list" v-for="(item, i) in data" :key="item">
    <div class="list-header">
      <div class="flex">
        <div class="list-header-line"></div>
        <div class="list-header-name">
          {{ item.templateName }} 丨 {{ item.portraitName }}
          <span style="font-size: 14px">（付款期数：{{ item.contracteesList.length }}期）</span>
        </div>
      </div>
      <div class="flex list-header-right">
        <a-switch
          :checked-value="1"
          :unchecked-value="0"
          :before-change="e => beforeChange(e, item)"
          v-model="item.templateState"
        />
        <div class="list-right-line"></div>
        <img src="@/assets/images/edit.png" alt="" @click="handleEdit(item)" />
      </div>
    </div>
    <div class="list-item">
      <div :class="{ 'list-card-more': item.show }" class="list-card">
        <div class="list-item-card" v-for="items in item.contracteesList" :key="items">
          <a-row class="grid-demo" :gutter="24">
            <a-col :span="4">
              <a-tooltip :content="items.nodeName">
                <div class="text-over node-name">{{ items.nodeName }}</div>
              </a-tooltip>
            </a-col>
            <a-col :span="5">
              <div>
                施工节点：
                <a-tooltip :content="items.constructionNodeName">
                  <span>{{ items.constructionNodeName }}</span>
                </a-tooltip>
              </div>
            </a-col>
            <a-col :span="5">
              <div class="text-over">
                验收项：
                <a-tooltip :content="getAcceptanceName(items.modelId, items.standardId)">
                  <span>{{ getAcceptanceName(items.modelId, items.standardId) }}</span>
                </a-tooltip>
              </div>
            </a-col>
            <a-col :span="5">
              <a-tooltip :content="items.computeRule === 1 ? '发包总金额*付款比例' : '工种发包总价*付款比例'">
                <div class="text-over">
                  计算规则：{{ items.computeRule === 1 ? "发包总金额*付款比例" : "工种发包总价*付款比例" }}
                </div>
              </a-tooltip>
            </a-col>
            <a-col :span="5">
              <div>付款比例：{{ items.payRate }}%</div>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="list-item-more" v-if="item.contracteesList.length > 2">
        <div class="flex" style="cursor: pointer" @click="item.show = !item.show">
          <div style="margin-right: 5px">{{ item.show ? "收起更多" : "展开更多" }}</div>
          <icon-down v-if="!item.show" />
          <icon-up v-else />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Modal, Message } from "@arco-design/web-vue";
import { updateStatus } from "@/apis/contracting";
import { standardTemplateTree } from "@/apis";

defineProps({
  data: {
    type: Array,
    default: () => []
  }
});
const templateTree = ref([]);
const emit = defineEmits(["handleEdit", "changeList"]);
const handleEdit = item => {
  emit("handleEdit", item);
};
const getTemplateTree = async () => {
  const { data } = await standardTemplateTree();
  templateTree.value = data;
};
getTemplateTree();

const getAcceptanceName = (modelId, standardId) => {
  if (!templateTree.value.length) {
    return "";
  }
  const objTree = templateTree.value.find(item => item.standardId === modelId);
  if (objTree) {
    let html = objTree.standardName;
    if (standardId) {
      const childObj = objTree.children.find(item => item.standardId === standardId);
      if (childObj) {
        html = `${html}/${childObj.standardName}`;
      }
    }
    return html;
  }
  return "";
};
// 点击禁用启用
const handleStatusUpdate = async templateId => {
  await updateStatus({ templateId });
  emit("changeList");
};
const beforeChange = (e, item) => {
  if (e) {
    handleStatusUpdate(item.templateId);
    Message.success("启用成功");
    return true;
  } else {
    Modal.confirm({
      title: "禁用模板",
      bodyStyle: {
        textAlign: "center"
      },
      content: "请确认是否禁用" + item.portraitName + "付款计划模板，禁用后历史数据不受影响",
      onBeforeOk: () => {
        item.templateState = e;
        handleStatusUpdate(item.templateId);
        Message.success("禁用成功");
        return true;
      }
    });
    return false;
  }
};
</script>
<style scoped lang="scss">
@import "index";
</style>
